<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"></detail-nav-bar>
    <scroll ref="scroll" class="content" :themeTopYs="themeTopYs"
    :getThemeTopY="getThemeTopY" @scroll="contentScroll"
    :probeType="3">
   <detail-swiper :topImages="topImages"></detail-swiper>
    <detail-base-info :goods="goods"></detail-base-info>
    <detail-shop-info :shop="shop"></detail-shop-info>
    <detail-goods-info :detail-info="detailInfo" @imagload="imagesLoad" ></detail-goods-info>
    <detail-param-info ref="params" :param-info="paramInfo"></detail-param-info>
    <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
    <goods-list ref="recommend"  :goods="recommends"></goods-list>
    </scroll>
    <detail-bottom-bar @addCart="addTocart"></detail-bottom-bar>
    <!-- <toast :message="message" :show="show"></toast> -->
  </div>
</template>

<script>
  import DetailNavBar from './childComps/DetailNavBar.vue'
  import DetailSwiper from './childComps/DetailSwiper.vue'
  import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
  import DetailShopInfo from './childComps/DetailShopInfo'
  import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
  import DetailParamInfo from './childComps/DetailParamInfo.vue'
  import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
  import DetailBottomBar from './childComps/DetailBottomBar.vue'

  import GoodsList from '../../components/content/goods/GoodsList.vue'
  import Scroll from 'components/common/scroll/Scroll'
  // import Toast from 'components/common/toast/Toast.vue'

  import {getDetail,Goods,Shop,GoodsParam,getRecommend} from "network/detail"
  import {debounce} from '../../components/common/utils.js'
  import {itemListenerMixin} from '../../common/mixin.js'
  import {mapActions} from 'vuex'

  export default {
    name : "Detail",
    data(){
      return {
        iid : null,
        topImages :[],
        goods : {},
        shop:{},
        detailInfo :{},
        paramInfo : {},
        commentInfo :{},
        recommends :[],
        themeTopYs:[],
        getThemeTopY: null,
        currentIndex : 0,
        // message : '',
        // show : false

      }
    },
    mixins:[itemListenerMixin],
    components : {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailCommentInfo,
      DetailBottomBar,
      Scroll,
      // Toast,
      GoodsList

    },
    created(){
      // 保存我们存入的iid
        this.iid = this.$route.params.iid
         getDetail(this.iid).then(res=>{
           console.log(res)
           const data = res.result;
           //1. 获取顶部图片
           this.topImages = data.itemInfo.topImages

           // 2.获取商品信息
           this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)

           // 3.创建店铺信息的对象
           this.shop = new Shop(data.shopInfo)

           //4.保存商品的详情数据
           this.detailInfo = data.detailInfo;

          //5. 获取参数信息
          this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)

          // 6.获取评论信息
          if(data.rate.cRate != 0){
            this.commentInfo = data.rate.list[0]
          }
          // this.$nextTick(()=>{
            // nextTick会在vue完成一个生命周期时调用
            // 根据最新的数据，对应的DOM是已经被渲染出来
            // 但是图片依然还是没有加载完（目前获取到offsetTop是不包含图片的）
            // offsettop值不对一般都是图片的问题
            // this.themeTopYs =[]
            // this.themeTopYs.push(0);
            // // $el 就是获取组件中的根组件
            // this.themeTopYs.push(this.$refs.params.$el.offsetTop);
            // this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
            // this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
            // console.log(this.themeTopYs)
          // })



         })

         getRecommend().then(res=>{
           this.recommends = res.data.list
         })

        // 给getThemeTopY赋值
        // this.getThemeTopY = debounce(()=>{
        //   // $el 就是获取组件中的根组件
        //   this.themeTopYs =[]
        //   this.themeTopYs.push(0);
        //   this.themeTopYs.push(this.$refs.params.$el.offsetTop);
        //   this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
        //   this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
        //   console.log(this.themeTopYs)
        // },100)

        this.getThemeTopY = ()=>{
          // 点击navbar滑动到指定的地方
            this.themeTopYs =[]
            this.themeTopYs.push(0);
            this.themeTopYs.push(this.$refs.params.$el.offsetTop);
            this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
            this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
            // Number.MAX_VALUE表示js中的最大值
            this.themeTopYs.push(Number.MAX_VALUE)
            console.log(this.themeTopYs)
            }
    },
    methods : {
      ...mapActions(['addCart']),

      imagesLoad(){
        // this.$refs.scroll.refresh();
        // this.getThemeTopY()
        console.log('hi')
      },
      titleClick(index){
        // console.log(index)
        this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],500)
         // this.getThemeTopY()
      },
      contentScroll(position){
        // 这里是获取详情页的y值
        const positionY = -position.y

        // 2.positionY和主题中的值进行对比
        let length = this.themeTopYs.length
        for(let i = 0 ; i < length-1; i++){
          // 普通的做法
          // if(this.currentIndex !== i && ((i < length - 1 && positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1]) || (i == length - 1 && positionY >= this.themeTopYs[i]))){
          //   // console.log(i)
          //   this.currentIndex = i
          //   // console.log(this.currentIndex)
          //   this.$refs.nav.currentIndex = this.currentIndex
          // }
          // hack一点的做法
          if(this.currentIndex !== i && (positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1])){
              this.currentIndex = i
              this.$refs.nav.currentIndex = this.currentIndex
          }
        }
        // 显示是否返回顶部
        // this.listenShowBackTop()
      },
      addTocart(){
         // 获取商品的信息
         const product = {}
         product.image = this.topImages[0];
         product.titel = this.goods.title;
         product.desc = this.goods.desc;
         product.price = this.goods.realPrice;
         product.iid = this.iid;

         // 2.将商品添加到购物车
         // this.$store.commit('addCart',product)
         // this.$store.dispatch("addCart",product).then(res=>{
         //   console.log(res)
         // })
         // mapActions用法
         this.addCart(product).then(res =>{
           // this.show = true;
           // this.message = res
           // setTimeout(()=>{
           //   this.show = false;
           //   this.message = ''
           // },1500)

           this.$toast.show(res)
         })


      }

    },
    mounted(){
      // 必须得知道每一张图片都加载完成 后才执行这个函数 先去洗澡
    // this.getThemeTopY &&  this.getThemeTopY()

    },
    destroyed(){
      this.$bus.$off('itemImgLoad',this.itemImgListener)
    },
    updated(){
    // console.log('hi')
    // this.getThemeTopY &&  this.getThemeTopY().
    // this.getThemeTopY()
    },
    beforeUpdate(){
      // 给getThemeTopY赋值
      // $el 就是获取组件中的根组件


    },
    watch:{
      themeTopYs(){
        console.log("themeTopYs发生了改变")

      }

    }
  }
</script>

<style scoped>
  .content{
    height: calc(100% - 44px - 49px)
    /* overflow: hidden; */
  }
  #detail{
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }
  .detail-nav{
    position: relative;
    z-index: 9;
    background-color: #fff;
  }
</style>
